<template>
  <div>
    <Card title="编辑归类" :bordered="false" dis-hover class="ivu-mt">
      <Form
        ref="brandForm"
        :model="infoData"
        :rules="ruleInline"
        :label-width="140"
      >
        <Row>
          <Col span="18" offset="3">
            <FormItem label="归类名称：" prop="classificationName">
              <Input
                v-model="infoData.classificationName"
                maxlength="20"
                show-word-limit
                placeholder="请输入归类名称"
              ></Input>
            </FormItem>
          </Col>
          <Col span="18" offset="3">
            <FormItem label="税类名称：" prop="taxCateName">
              <Input
                readonly
                search
                v-model="infoData.taxCateName"
                placeholder="选择税类名称"
                style="width: auto"
                @on-search="searchTaxCateName"
              />
            </FormItem>
          </Col>
          <Col span="18" offset="3">
            <FormItem label="税类编号：">
              <span>{{ infoData.taxCateNo }}</span>
            </FormItem>
          </Col>
          <Col span="18" offset="3">
            <FormItem label="税率：">
              <span>{{ infoData.taxRate }}</span>
            </FormItem>
          </Col>
          <Col span="18" offset="3">
            <FormItem label="介绍：">
              <Input
                type="textarea"
                :autosize="{ minRows: 2, maxRows: 5 }"
                maxlength="200"
                show-word-limit
                v-model="infoData.note"
                placeholder="请输入归类介绍"
              ></Input>
            </FormItem>
          </Col>
          <Col span="18" offset="3">
            <FormItem>
              <Button type="primary" @click="handleSubmit('brandForm')"
                >提交</Button
              >
              <Button @click="handleReset('brandForm')" class="ivu-ml-8"
                >取消</Button
              >
            </FormItem>
          </Col>
        </Row>
      </Form>
    </Card>
    <!--选择归类名称-->
    <Modal v-model="linkTaxCateModel" width="1000" title="选择归类">
      <Card dis-hover>
        <Row type="flex" justify="start" align="bottom">
          <Col style="margin-right: 40px">
            <span style="margin-right: 10px">税类名称</span>
            <Input
              style="width: auto"
              v-model="taxCateName"
              placeholder="请输入税类名称"
            ></Input>
          </Col>
          <Col>
            <Button
              type="primary"
              style="margin-right: 10px"
              @click="searchBt()"
              >查询</Button
            >
            <Button @click="clearBt()">清空</Button>
          </Col>
        </Row>
      </Card>
      <Card dis-hover>
        <Row>
          <Table
            ref="selection"
            border
            :columns="linkTaxCateCol"
            :data="taxCateList"
          >
            <template slot-scope="{ row, index }" slot="action">
              <Button
                type="success"
                size="small"
                style="margin: 3px 0"
                @click="selectItemBt(row, index)"
                >选择</Button
              >
            </template>
          </Table>
          <div style="display: flex; justify-content: center; margin-top: 20px">
            <Page
              :total="totalNum"
              show-total
              show-sizer
              :current.sync="nowPage"
              @on-change="onPageChange"
              @on-page-size-change="handleChangePage"
            />
          </div>
        </Row>
      </Card>
      <div slot="footer"></div>
    </Modal>
  </div>
</template>
<script>
import brandUpdata from './configjs/classficationDataAdd';
import Upload from '@/components/common/upload'; // 上传组件

import { ApiRequest } from '@api/basePage';

export default {
  components: {
    Upload
  },
  mixins: [brandUpdata],
  data () {
    return {
      ruleInline: {
        classificationName: [
          { required: true, message: '请输入归类名称.', trigger: 'blur' }
        ],
        taxCateName: [{ required: true, message: '请输入税类名称.' }],
        note: [{ required: true, message: '请输入归类介绍.', trigger: 'blur' }]
      },
      infoData: {
        classificationName: '',
        taxCateName: '',
        taxCateNo: '',
        taxRate: '',
        note: '',
        version: '',
        uuid: ''
      },
      taxCateList: [],
      totalNum: 0,
      nowPage: 1,
      pageShow: 10,
      taxCateName: '',
      linkTaxCateModel: false,
      linkTaxCateCol: [
        {
          title: '税类名称',
          key: 'taxCateName'
        },
        {
          title: '税类编号',
          key: 'taxCateNo'
        },
        {
          title: '税率',
          key: 'taxRate'
        },
        {
          title: '操作',
          slot: 'action',
          align: 'center',
          minWidth: 120
        }
      ]
    };
  },
  created () {
    this.getConfigData();
  },
  methods: {
    searchBt () {
      this.getTaxDataList();
    },
    clearBt () {
      this.taxCateName = '';
      this.searchBt();
    },
    selectItemBt (row, index) {
      this.infoData.taxCateName = row.taxCateName;
      this.infoData.taxRate = row.taxRate;
      this.infoData.taxCateNo = row.taxCateNo;
      this.linkTaxCateModel = false;
    },
    searchTaxCateName () {
      this.linkTaxCateModel = true;
      this.getTaxDataList();
    },
    handleChangePage (val) {
      this.pageShow = val;
      this.searchBt();
    },
    onPageChange (val) {
      this.nowPage = val;
      this.searchBt();
    },
    getTaxDataList () {
      let searchParam = [];
      searchParam.push({ name: 'taxCateName', value: this.taxCateName });
      searchParam.push({ name: 'taxCateName_q', value: 'Like' });
      let data = {
        nowPage: this.nowPage,
        pageShow: this.pageShow,
        searchParam: JSON.stringify(searchParam)
      };
      ApiRequest(
        '/sysback/taxcategory/baseQueryList',
        'post',
        data,
        false
      ).then(res => {
        if (res.retStatus === '1') {
          this.taxCateList = res.retData.results;
          this.totalNum = res.retData.totalNum;
        }
      });
    },
    // 获取初始配置信息
    getConfigData () {
      this.pagePath = this.$route.path;
      let dynamicData = require('./configjs/classficationDataAdd').default;
      this.requestApi = dynamicData.requestApi; // 页面所需接口集合
      this.$set(this.$data, 'dynamicData', dynamicData);
      // 重新获取数据
      this.uuid = this.$route.query.uuid;
      this.baseGetByUuid();
    },
    baseGetByUuid () {
      let data = {
        uuid: this.uuid
      };
      let url = '';
      if (this.$route.query.pagesource == 1) {
        url = this.requestApi.baseGetByUuidSbit;
      } else {
        url = this.requestApi.baseGetByUuid;
      }
      ApiRequest(url.url, url.type, data, true).then(res => {
        if (res.retStatus === '1') {
          this.infoData.classificationName = res.retData.classificationName;
          this.infoData.taxCateName = res.retData.taxCateName;
          this.infoData.taxCateNo = res.retData.taxCateNo;
          this.infoData.taxRate = res.retData.taxRate;
          this.infoData.note = res.retData.note;
          this.infoData.version = res.retData.version;
          this.infoData.uuid = this.uuid;
        }
      });
    },
    // 清空表单
    handleReset (name) {
      this.$router.go(-1);
    },
    handleSubmit () {
      this.$refs['brandForm'].validate(valid => {
        if (valid) {
          let data = this.infoData;
          if (this.sLoading) {
            return false;
          }
          this.sLoading = true;
          let url = '';
          if (this.$route.query.pagesource == 1) {
            url = this.requestApi.baseUpdateSbit;
          } else {
            url = this.requestApi.baseUpdate;
          }
          ApiRequest(url.url, url.type, data).then(res => {
            if (res.retStatus === '1') {
              this.$Message.success('成功!');
              this.$router.go(-1);
            }
            this.sLoading = false;
          });
        }
      });
    },
    // 改变选中值
    handleChange (value, type) {
      this.taxCateList.forEach(item => {
        if (value === item.taxCateName) {
          this.infoData.taxCateNo = item.taxCateNo;
          this.infoData.taxRate = item.taxRate;
        }
      });
    }
  }
};
</script>
<style lang="less" scoped>
</style>